<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>在线小说连载</title>
		<link rel="icon" href="images/icon.gif" type="image/x-ico">
		<link rel='stylesheet' type='text/css' href="css/bootstrap.css"/>
		<link href="css/styleFantasy.css" rel='stylesheet' type='text/css'/>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="iocnfont/iconfont.css">
		<link rel="stylesheet" href="css/gototop.css">
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
		<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
		<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
		<script>
            $(function () {

                novelPageList(1, 2);

                //为查询按钮绑定事件
                $("#searchBtn").click(function () {
                    /*
                    	点击查询按钮的时候,我们应该将搜索框中的信息保存起来,保存到隐藏域中
                     */
                    $("#hidden-novelName").val($.trim($("#novelName").val()));
                    novelPageList(1, 2);
                    //然后将搜索框中的数据清空
                    $("#novelName").val("");
                })
            })

            function novelPageList(pageNo, pageSize) {

                //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
                $("#novelName").val($.trim($("#hidden-novelName").val()));
                $.ajax({

                    url: "novel/novelPageList.do",
                    data: {
                        "novelColumn": "${nc}",
                        "pageNo": pageNo,
                        "pageSize": pageSize,
                        "novelName": $.trim($("#novelName").val())
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<li style="margin-top: 20px">';
                            html += '<div class="pro-img">';
                            html += '<a href="novel/history/PageListByNc.do?novelId='+n.id+'"><img src="images/\'' + n.chapterNums + '\'.jpeg" alt="">';
                            html += '</a>';
                            html += '</div>';
                            html += '<h3><a href=" jsp/workbench/history/single.jsp">' + n.name + '</a></h3>';
                            html += '<p class="desc">' + n.review + '</p>';
                            html += '<p class="price"><span>共' + n.chapterNums + '</span></p>';
                            html += '<div class="review">';
                            html += '<a href=" jsp/workbench/history/single.jsp">';
                            html += '<span class="msg">字数:' + n.pageNum + '</span>';
                            html += '<span class="auther">' + n.states + '</span>';
                            html += '<span class="more"> 总点击量:' + n.voteNum + ' </span>';
                            html += '</a>';
                            html += '</div>';
                            html += '</li>';
                        })

                        $("#novelBody").html(html);

                        //计算总页数
                        var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                        //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                        $("#novelPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数是在,点击分页组件的时候触发的
                            //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                            onChangePage: function (event, data) {
                                novelPageList(data.currentPage, data.rowsPerPage);
                            }
                        });
                    }
                })
            }
		</script>
	</head>

	<body>

		<article class="content">
			<div class="container">
				<!-- 小说介绍 -->
				<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 center">
					<input type="hidden" id="hidden-novelName">
					<div class="product">
						<form class="form-inline" role="form" style="position: relative;top: 1%; left: 70px;">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">小说名:</div>
									<input type="text" class="form-control" id="novelName">
								</div>
							</div>
							<button id="searchBtn" type="button" class="btn btn-default">查询</button>
						</form>
						<ul id="novelBody">
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href="jsp/workbench/fantasy/single.jsp"><img src="images/bigbook1.jpeg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp"> 黑雾之下</a></h3>--%>
							<%--	<p class="desc">不明黑色拱门的出现导致全球陷入巨大恐慌，负责探索门后世界的【灯塔基地】随之成立</p>--%>
							<%--	<p class="price"><span>共七百八十六章</span></p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数235.0万</span>--%>
							<%--			<span class="auther"> 持续更新 </span>--%>
							<%--			<span class="more"> 总点击量118.3万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<img src="images/bigbook2.jpeg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp">仙剑在此</a></h3>--%>
							<%--	<p class="desc">表面上他是个剑仙。实际上……他是一个挂逼。</p>--%>
							<%--	<p class="price">--%>
							<%--		<span>一千四百四十四章</span>--%>
							<%--	</p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数350.6万</span>--%>
							<%--			<span class="auther"> 总推荐1002.8万 </span>--%>
							<%--			<span class="more"> 总点击量8181.4万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<img src="images/bigbook3.jpeg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp">仙朝 </a></h3>--%>
							<%--	<p class="desc">郢都城的日落，是天底下最美的景色。”</p>--%>
							<%--	<p class="price">--%>
							<%--		<span>共六百三十一章</span>--%>
							<%--	</p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数350.6万</span>--%>
							<%--			<span class="auther"> 总推荐1002.8万 </span>--%>
							<%--			<span class="more"> 总点击量8181.4万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<img src="images/bigbook4.jpeg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp">大佬每天脑补夫人爱惨了他</a></h3>--%>
							<%--	<p class="desc">所有人都认为白沐夏在袁家是个笑话。</p>--%>
							<%--	<p class="price">--%>
							<%--		<span>共六百三十一章</span>--%>
							<%--	</p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数350.6万</span>--%>
							<%--			<span class="auther"> 总推荐1002.8万 </span>--%>
							<%--			<span class="more"> 总点击量8181.4万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<img src="images/bigbook5.jpg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp">大道南行</a></h3>--%>
							<%--	<p class="desc">修得一念自在明，大道悠悠亘古清。一朝得悟两全法，枯守岁月道难行</p>--%>
							<%--	<p class="price">--%>
							<%--		<span>共六百三十一章</span>--%>
							<%--	</p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数350.6万</span>--%>
							<%--			<span class="auther"> 总推荐1002.8万 </span>--%>
							<%--			<span class="more"> 总点击量8181.4万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
							<%--<li>--%>
							<%--	<div class="pro-img">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<img src="images/bigbook6.jpg" alt="">--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--	<h3><a href=" jsp/workbench/fantasy/single.jsp">都市奇门相师</a></h3>--%>
							<%--	<p class="desc">奇门者，通古知今，有鬼神莫测之能也！</p>--%>
							<%--	<p class="price">--%>
							<%--		<span>共六百三十一章</span>--%>
							<%--	</p>--%>
							<%--	<div class="review">--%>
							<%--		<a href=" jsp/workbench/fantasy/single.jsp">--%>
							<%--			<span class="msg">字数350.6万</span>--%>
							<%--			<span class="auther"> 总推荐1002.8万 </span>--%>
							<%--			<span class="more"> 总点击量8181.4万 </span>--%>
							<%--		</a>--%>
							<%--	</div>--%>
							<%--</li>--%>
						</ul>
					</div>
					<br>
					<div style="height: 50px; position: relative;top: 30px;">
						<div id="novelPage"></div>
					</div>
				</div>
			</div>
		</article>
	</body>

</html>